<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>列表元素：集合-一组相同数据</h1>
		<!-- 第一种使用方式：无序列表   使用率高;网站优化，有利于seo优化 -->
		<ul>
			<li>哪吒</li>
			<li>白雪公主</li>
			<li>熊出没</li>
		</ul>
		<!-- 第二种使用方式：有序列表 -->
		<ol>
			<li>小头爸爸</li>
			<li>邋遢大王</li>
			<Li>灰太狼</Li>
		</ol>
		<!-- 第三种使用方式：定义列表   解释小图片 -->
		<dl>
			<dt><img src="img/1.PNG.png"></dt>
			<dd>这是灰太狼</dd>
		</dl>
		<h1>表单元素</h1>
		<!-- 采集用户信息：账户登录、颜色、功能型操作 -->
		<form>
		账号：<input type="text">
		密码：<input type="password">
		<button>按钮</button>
		<input type="submit">
		<input type="reset">
		男 <input type="radio" name="sex">
		女 <input type="radio" name="sex">
		肉 <input type="checkbox">
		菜 <input type="checkbox">
		汤 <input type="checkbox">
		</form>
		<h1>新元素</h1>
		<!-- 记号笔元素 -->
		lorem<mark>lorems</mark>
		<!-- 度量元素 -->
		<meter value="60" max="100" min="1"></meter>
		<!-- 细节元素 -->
		<details>
			<summary>显示默认效果</summary>
			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium tempore nesciunt totam id, eligendi vitae, unde placeat, accusamus doloremque quisquam earum esse architecto tempora ullam voluptatem incidunt itaque amet? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam cumque odit aut pariatur voluptatem laboriosam qui animi officia quis earum at placeat ipsa eum illum, libero accusamus numquam voluptatibus tempore! Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias impedit dignissimos, quasi fuga ut, eos inventore dolor accusamus est optio labore voluptatibus culpa ducimus nulla iusto quod repellendus sed. Hic.</div>
		</details>
	</body>
</html>